<template>
  <div>
    <el-dialog
      title="日报"
      :visible.sync="show"
      width="60%"
      :before-close="handleClose"
    >
      <el-button size="small" type="primary" @click="add">新增</el-button>
      <el-table
        :data="tableData"
        style="width: 100%; margin: 1vw 0"
        border
        @row-dblclick="dblclick"
        :cell-class-name="cellClass"
      >
        <el-table-column prop="projectCode" label="项目编号"> </el-table-column>
        <el-table-column
          prop="content"
          label="日报内容"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.content"
              v-if="scope.row.className == showTarget"
              @blur="blur(scope.row)"
              :autofocus="true"
            ></el-input>
            <div
              v-else
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.content }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日报日期">
          <template slot-scope="scope">
            {{ showTarget }}
            <el-date-picker
              v-model="scope.row.date"
              style="width: 200px; margin: 0 0 0 0.5vw"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
              type="date"
              size="small"
              v-if="scope.row.className == showTarget"
              @blur="blur(scope.row)"
            ></el-date-picker>
            <div v-else>{{ scope.row.date }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="填报人"> </el-table-column>
        <el-table-column prop="control" label="操作栏">
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click="deletes(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <!-- <el-button type="primary" @click="show = false">确 定</el-button> -->
      </span>
    </el-dialog>
    <insertView
      :shows="shows"
      @closes="closes"
      :projectCode="projectCode"
      @refresh="refresh"
    />
  </div>
</template>

<script>
import insertView from "./insertView.vue";
export default {
  props: ["show", "projectCode"],
  components: {
    insertView,
  },
  data() {
    return {
      tableData: [
        // {
        //   projectCode: " ",
        //   content: " ",
        //   date: " ",
        //   name: " ",
        // },
      ],
      shows: false,
      showTarget: "",
    };
  },
  watch: {
    show(newV) {
      if (newV) {
        this.getlist();
      }
    },
    showTarget(newV) {
      console.log(newV, "11pp");
    },
  },
  methods: {
    getlist() {
      let obj = {
        projectCode: this.projectCode,
        name: this.$store.state.user.name,
      };
      this.$http.get("/getmddetail", { params: obj }).then((res) => {
        console.log(res, "res");
        if (res.code == 200) {
          this.tableData = res.data.data;
        }
      });
    },
    handleClose() {
      this.$emit("close", true);
    },
    add() {
      this.shows = true;
    },
    closes(e) {
      if (e == true) {
        this.shows = false;
      }
    },
    refresh(e) {
      if (e == true) {
        this.getlist();
      }
    },
    deletes(e) {
      let url = "/deleteDdetail/" + e.id;
      this.$http.get(url).then((res) => {
        if (res.code == 200) {
          this.getlist();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //双击修改
    dblclick(row, column, event) {
      console.log(row, column, event);
      this.showTarget = row.index.toString() + column.index.toString();
    },
    cellClass({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
      row.className = rowIndex.toString() + columnIndex.toString();
      // return rowIndex.toString() + columnIndex.toString();
    },
    //离去
    blur(e) {
      let obj = this.filterObj(e);
      this.showTarget = "";
      this.$http.post("/editDetail", obj).then((res) => {
        console.log(res);
      });
    },
    filterObj(e) {
      let obj = {};
      for (let key in e) {
        if (key != "index" && key != "className") {
          obj[key] = e[key];
        }
      }
      return obj;
    },
  },
};
</script>

<style>
</style>